<template >
  <el-submenu v-if="menu.children && menu.children.length >= 1 && !menu.hideFromMenu"
              :index="menu.id"
              :popper-append-to-body="false">
    <template slot="title">
          <el-tooltip :open-delay="1000" :content="menu.name" placement="top" effect="dark" v-if="this.$store.state.sidebarFold">
            <svg class="icon-svg aui-sidebar__menu-icon"
                aria-hidden="true">
              <use :xlink:href="`#${menu.icon}`"></use>
            </svg>
        </el-tooltip>
          <svg class="icon-svg aui-sidebar__menu-icon"
                aria-hidden="true" v-else>
              <use :xlink:href="`#${menu.icon}`"></use>
            </svg>
        <el-tooltip :open-delay="1000" v-if="(menu.name.length>14)" :content="menu.name" placement="top" effect="dark">
          <span>{{ menu.name.substring(0,14) }}...</span>
        </el-tooltip>
        <span v-else>{{ menu.name }}</span>

        <span></span>
        <span v-if="hasOwnPropertythat('tooltip')&&menu.tooltip.content"
                :style="hasOwnPropertythat('tooltip')?{background:menu.tooltip.backGroundColor,color:menu.tooltip.color}:''"
                class="badgePoint">{{ hasOwnPropertythat('tooltip')?menu.tooltip.content:'' }}</span>
    </template>
    <div :class="{'isMaxHeight':$store.state.sidebarFold}">

      <sub-menu v-for="item in menu.children"
                :key="item.id"
                :menu="item"></sub-menu>
    </div>
  </el-submenu>
  <el-menu-item v-else-if="!menu.hideFromMenu"
                :index="menu.id"
                @click="gotoRouteHandle(menu.id)">
    <template v-if="menu.name !== 'menu-status'">
      <el-tooltip :open-delay="1000" :content="menu.name"
                  placement="right-start"
                  effect="dark"
                  v-if="this.$store.state.sidebarFold">
        <svg class="icon-svg aui-sidebar__menu-icon"
             aria-hidden="true">
          <use :xlink:href="`#${menu.icon}`"></use>
        </svg>
      </el-tooltip>
      <svg class="icon-svg aui-sidebar__menu-icon"
            aria-hidden="true" v-else>
          <use :xlink:href="`#${menu.icon}`"></use>
        </svg>
      <el-badge v-if="menu.url === 'mspbots/Integrations/index' && integrationsCount > 0" :value="integrationsCount" :class="['item',{'el_badge_item':$store.state.sidebarFold}]">
          <span>{{ menu.name }}</span>
      </el-badge>
      <span v-else :value="hasOwnPropertythat('tooltip')?menu.tooltip.content:''" class="item badgePointContent">

        <el-tooltip :open-delay="1000" v-if="menu.name.length>14||this.$store.state.sidebarFold"
                    :content="menu.name"
                    placement="right-start"
                    effect="dark">
          <span>{{ menu.name.substring(0,14) }}...</span>
        </el-tooltip>
        <span v-else>{{ menu.name }}</span>
        <span v-if="hasOwnPropertythat('tooltip')&&menu.tooltip.content"
              :style="hasOwnPropertythat('tooltip')?{background:menu.tooltip.backGroundColor,color:menu.tooltip.color}:''"
              class="badgePoint">{{ hasOwnPropertythat('tooltip')?menu.tooltip.content:'' }}</span>
      </span>
    </template>
    <template v-else>
      <div style="display:flex;align-items:center;height:inherit;justify-content:flex-end;">
        <svg class="icon-svg aui-sidebar__menu-icon"
             style="float:right"
             aria-hidden="true">
          <use :xlink:href="`#${menu.icon}`"></use>
        </svg>
      </div>
    </template>
  </el-menu-item>
</template>

<script>
import SubMenu from './main-sidebar-sub-menu'
import Cookies from 'js-cookie'
import CryptoJS from 'crypto-js'
export default {
  name: 'sub-menu',
  props: {
    menu: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      MessageInterval: null
    }
  },
  components: {
    SubMenu
  },
  computed: {
    integrationsCount () {
      return this.$store.state.user.integrations
    }
  },
  created () {

  },
  methods: {
    gotoRouteHandle (menuId) {
      var route = this.$store.getters.addRoutes.filter(item => this._.get(item, 'meta.menuId') === menuId)[0]
      if (route) {
        // if (route.name === 'mspbots-client-portal-index') {
        //   if (!Cookies.get('token') || !Cookies.get('tenant_code')) {
        //     this.$router.replace({ name: 'loginAsAccount' })
        //   }
        //   this.$store.commit('SET_PORTAL_ADMIN', true)
        //   let routerJump = this.$router.resolve({ path: 'portal' })
        //   // localStorage.setItem('portal-isPortalAdmin', true)
        //   // localStorage.setItem('portal-token', Cookies.get('token'))
        //   // localStorage.setItem('portal-tenant_code', Cookies.get('tenant_code'))
        //   let windowObject = null
        //   if (window.location.hostname === 'app.maibozhineng.com') {
        //     windowObject = window.open(`https://portal.mspbots.ai${routerJump.href.replace('app', 'portal')}`, '_blank')
        //   } else {
        //     windowObject = window.open(`https://portalint.mspbots.ai${routerJump.href.replace('app', 'portal')}`, '_blank')
        //   }
        //   // windowObject = window.open(routerJump.href, '_blank')
        //   this.MessageInterval = setInterval(() => {
        //     if (windowObject) {
        //       windowObject.postMessage({
        //         isPortalAdmin: true,
        //         status: Cookies.get('token'),
        //         code: Cookies.get('tenant_code')
        //       }, '*')
        //     }
        //   }, 1000)
        // } else {
        if (route.path === '视频监控') {
          window.open(route.meta.iframeURL, '_blank')
        } else {
          this.$router.push({ path: route.path, query: route.query })
        }
      }
      //  }
      // }
    },
    hasOwnPropertythat (key) {
      if (this.menu[key] && !this.menu[key].hideTooltip) return true
      else return false
    }
  }
}
</script>
<style>
  .el-badge__content {
    margin-top: 12px;
    padding: 0 7px;
  }
  .el_badge_item .el-badge__content {
    margin-top: 12px;
    margin-right: 5px;
    padding: 0 4px;
  }
  .el-badge__content.is-fixed {
    right: 0!important;
  }
  .badgePointContent{
    position: relative;

  }
  .badgePoint{
    position: absolute;
    display: inline-block;
    top: -13px;
    right: -5px;
    -webkit-transform: translateY(-50%) translateX(100%);
    transform: translateY(-50%) translateX(100%);
    background-color: #F56C6C;
    border-radius: 10px;
    color: #FFF;
    display: inline-block;
    font-size: 12px;
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #FFF;
    margin-top: 12px;
    padding: 0 7px;
  }
</style>
<style lang="scss" scoped>
::v-deep .el-menu {
  bottom: 0!important;
  top: auto !important;
}
.isMaxHeight {
  max-height:300px;
  overflow: auto;
}
</style>
